﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>头部内容</title>
</head>
<body>
    <div style="position: absolute; left: 15px; bottom: 1px;">
        <h1>Web---EasyUI</h1>
    </div>
    <div style="position: absolute; right: 5px; top: 10px;">
        admin &nbsp; 当前时间:&nbsp;
        <span id="timer">
            <script type="text/javascript">
                $('#timer').timer({format:'yy年mm月dd日 W HH:MM:ss'});
            </script>
        </span>
    </div>
    <div style="position: absolute; right: 1px; bottom: 0px;">
        <a href="javascript:void(0)" id="color_mb" class="easyui-menubutton" data-options="menu:'#theme_list',iconCls:'icon-other-color_wheel'">更换主题</a>
        <div id="theme_list" style="width: 120px;">
            <div onclick="changeTheme('default')">default</div>
            <div onclick="changeTheme('gray')">gray</div>
            <div onclick="changeTheme('metro')">metro</div>
            <div onclick="changeTheme('cupertino')">cupertino</div>
            <div onclick="changeTheme('dark-hive')">dark-hive</div>
            <div onclick="changeTheme('pepper-grinder')">grinder</div>
            <div onclick="changeTheme('sunny')">sunny</div>
            <div onclick="changeTheme('bootstrap')">bootstrap</div>
        </div>
        <a id="ctrl_mb" href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#ctrl_list',iconCls:'icon-other-cog'">控制面板</a>
        <div id="ctrl_list" style="width: 100px;">
            <div iconCls="icon-user-user">个人信息</div>
            <div iconCls="icon-other-color_wheel">
                <span>更换主题</span>
                <div style="width: 120px;">
                    <div onclick="changeTheme('default')">default</div>
                    <div onclick="changeTheme('gray')">gray</div>
                    <div onclick="changeTheme('metro')">metro</div>
                    <div onclick="changeTheme('cupertino')">cupertino</div>
                    <div onclick="changeTheme('dark-hive')">dark-hive</div>
                    <div onclick="changeTheme('pepper-grinder')">grinder</div>
                    <div onclick="changeTheme('sunny')">sunny</div>
                    <div onclick="changeTheme('bootstrap')">bootstrap</div>
                </div>
            </div>
        </div>
        <a id="win_mb" href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#win_list',iconCls:'icon-user-user'">注销</a>
        <div id="win_list" style="width: 100px;">
            <div onclick="loginWin('lock')">锁定窗口</div>
            <div onclick="loginWin('login')">重新登录</div>
            <div onclick="loginWin('quit')">退出系统</div>
        </div>
    </div>
    <!--弹出窗口-->
    <div id="loginwin" class="easyui-window" data-options="closed:true">
        <p></p>
        <form action="" method="POST">
            <table>
                <tr>
                    <td>
                        <label>帐号</label>
                    </td>
                    <td>
                        <input type="text" class="easyui-validatebox" data-options="required:true"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>密码</label>
                    </td>
                    <td>
                        <input type="password" class="easyui-validatebox" data-options="required:true"/>
                    </td>
                </tr>
            </table>
            <div class="buttonLine">
                <a id="loginbtn" href="#" class="easyui-linkbutton">确定</a>
                <a id="logincancel" href="#" class="easyui-linkbutton" onclick="func_loginCancel();">取消</a>
            </div>
        </form>
    </div>
    <!--弹出窗口-->
    <script type="text/javascript">
        function loginWin(obj) {
            $('#loginwin').window({
                title:'登录窗口',
                width:300,
                height: 200,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                closable:false,
                modal:true
            });

            $('#loginwin').window('open');
        }

        function func_loginCancel() {
            $('#loginwin').window('close');
        }
    </script>
</body>
</html>
